<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <babyAvatar :child="child"></babyAvatar>
      </el-col>
      <el-col :span="18">
        <baseInfo :child="child"></baseInfo>
      </el-col>
    </el-row>
    <div v-show="pageStack[pageStack.length - 1] === 0">
      <el-row style="margin-top:15px;">
        <healthForm
          ref="healthForm"
          :symptom_list="symptom_list"
          :commodity="commodity"
          :active-tab="activeTab"
        ></healthForm>
      </el-row>
      <el-row style="background:#fff;padding:0 10px">
        <div class="column" style="padding: 10px 0;">
          <div class="title">备注</div>
          <el-input
            v-model="remark"
            style="width:80%"
            type="textarea"
            :rows="3"
            placeholder="此处可输入宝宝的其他备注信息"
          >
          </el-input>
        </div>
      </el-row>
      <div class="btn-box">
        <div class="submit-btn" @click="submit">提交</div>
      </div>
    </div>
    <healthCareNextDetail
      v-show="pageStack[pageStack.length - 1] === 1"
      :id="id"
      @next="next"
    ></healthCareNextDetail>
  </div>
</template>
<script>
import babyAvatar from '@/components/common/babyAvatar/babyAvatar';
import baseInfo from '../diseaseDetail/baseInfo';
import healthForm from './healthForm';
import healthCareNextDetail from './healthCareNextDetail';

export default {
  components: {
    babyAvatar,
    baseInfo,
    healthForm,
    healthCareNextDetail
  },
  props: {
    id: {}
  },
  data() {
    return {
      pageStack: [0],
      child: {},
      commodity: [],
      symptom_list: [],
      remark: '',
      activeTab: 0
    };
  },
  watch: {
    id: {
      handler(v) {
        if (v) {
          this.getHealthInfo();
          this.getHeader();
          this.isFeedBack();
        }
      },
      immediate: true
    }
  },
  created() {},
  methods: {
    submit() {
      const params = {
        u_id: this.id
      };
      if (this.$refs.healthForm.activeTab === 0) {
        const symptom_id_arr = this.symptom_list.reduce((a, b) => {
          return a.concat(b.data.filter(it => it.active));
        }, []);
        if (symptom_id_arr.length === 0) {
          this.$message.error('请至少选择一项');
          return;
        }
        params.symptom_id = symptom_id_arr.map(it => it.id);
      } else {
        params.disease_id = this.$refs.healthForm.selfRes;
        if (!params.disease_id) {
          this.$message.error('请至少选择一项');
          return;
        }
      }
      params.remark = this.remark;
      this.$http.post(this.$url.saveHealthInfo, params).then(res => {
        this.$emit(
          'next',
          {
            record_id: res.record_id
          },
          2
        );
      });
    },
    getHealthInfo() {
      this.$http
        .post(this.$url.getHealthInfo, {
          u_id: this.id
        })
        .then(res => {
          this.commodity = res.commodity;
          this.symptom_list = Object.keys(res.symptom_list).map(it => {
            res.symptom_list[it].data.forEach(item => {
              item.label = item.symptom_name;
              item.value = item.id;
            });
            return res.symptom_list[it];
          });
        })
        .catch(this.$catch);
    },
    getHeader() {
      this.$http
        .post(this.$url.childBaseInfo, {
          u_id: this.id
        })
        .then(res => {
          res.avatar =
            res.sex === '男'
              ? 'https://img.bingovip.shop/1570156689639.jpg'
              : 'https://img.bingovip.shop/1570156673539.jpg';
          this.child = res;
        })
        .catch(this.$catch);
    },
    isFeedBack() {
      this.$http
        .post(this.$url.isFeedBack, {
          u_id: this.id
        })
        .then(res => {
          if (res.status === 1) {
            this.pageStack = [0, 1];
          } else {
            this.pageStack = [0];
          }
        })
        .catch(this.$catch);
    },
    next(data, index) {
      this.$emit('next', data, index);
    }
  }
};
</script>
<style lang="scss" scoped>
.btn-box {
  background-color: #fff;
  display: flex;
  justify-content: center;
  height: 140px;
  .submit-btn {
    margin-top: 20px;
    line-height: 40px;
    text-align: center;
    width: 230px;
    height: 40px;
    border-radius: 20px;
    background-color: #ffb03e;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    &.active {
      opacity: 0.5;
    }
  }
}
.column {
  background-color: #f2f6ff;
  display: flex;
  align-items: center;
  min-height: 50px;
  margin-bottom: 8px;
  font-size: 16px;
  .title {
    position: relative;
    width: 167px;
    box-sizing: border-box;
    color: #4b90ff;
    padding-left: 10px;
    font-weight: bold;
    .require {
      position: absolute;
      left: 2px;
      top: -4px;
      color: #dd331d;
    }
    .big-tip {
      color: #fff;
      background-color: red;
      padding: 5px 20px;
      border-radius: 5px;
      margin-left: 5px;
    }
  }
}
</style>
